<template>
    <div class="income-container">
        <div class="chart" id="chart_left3"></div>
    </div>
</template>

<script>
    import { getAction } from '@/api/manage'
    import { mixinDevice } from '@/utils/mixin.js'
    import echarts from 'echarts'

    export default {
        name: 'income',
        mixins: [mixinDevice],
        props: {
            // 父组件传递过来的值
            areaCode: {
                type: String,
                default: ''
            },
            areaLevel: {
                type: String,
                default: ''
            }
        },
        data() {
            return {
                monthList:[],// 月份
                glassList:[],// 玻璃输液瓶
                plasticList:[],// 塑料输液瓶
            }
        },
        watch: {
            // 如果 `areaCode` 发生改变，这个函数就会运行
            areaCode: function(newValue, oldValue) {
                this.getStatisticsData()
            },
        },
        mounted() {
            this.getStatisticsData()
        },
        methods: {
            async getStatisticsData() {
                let params = {
                    areaCode: this.areaCode,
                    areaLevel: this.areaLevel
                }
                let res = await getAction('/hc/Statistical/InfusionBottleLeftLower',params)
                if (res && res.success) {
                    let data = res.result || [];
                    let dataInfo = []
                    let month = []
                    let glassList = []
                    let plasticList = []
                    data.forEach((item,index)=>{
                        month.push(item['yearMonth'])
                        dataInfo.push(item['maps'])
                    })
                    this.monthList = month
                    dataInfo.forEach((item,index)=>{
                        item.forEach((i,k)=>{
                            // 玻璃输液瓶（kg）
                            if(i['wasteId'] == '1497037719065366530'){
                                glassList.push(i.totalWastePresentValue)
                            }
                            // 塑料输液瓶（kg）
                            if(i['wasteId'] == '1497037956056125441'){
                                plasticList.push(i.totalWastePresentValue)
                            }
                        })
                    })
                    this.glassList = glassList
                    this.plasticList = plasticList
                }
                this.getEchartLeft3()
            },

            getEchartLeft3() {
                let myChart = this.$echarts.init(document.getElementById('chart_left3'))
                let option = {
                    color: ['#287CE7', '#29B0C5', '#E9BC5C', '#AD7BCF'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: { // 坐标轴指示器，坐标轴触发有效
                            type: 'line' // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    legend: {
                        data: ['玻璃输液瓶', '塑料输液瓶'],
                        top: '5%',
                        right: '0%',
                        textStyle: {
                            color: '#EFF7FF',
                            "fontSize": 12
                        }
                    },
                    grid: {
                        left: '4%',
                        right: '5%',
                        top: '15%',
                        bottom: '5%',
                        containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        boundaryGap: false,
                        data: this.monthList,
                        axisLine: {
                            lineStyle: {
                                color: 'rgba(164,218,255,0.1)',
                                type: 'solid'
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            interval: 0,
                            rotate:35,
                            color: '#fdfeff'
                        }
                    }],
                    yAxis: [{
                        type: 'value',
                        name: '单位：kg',
                        nameTextStyle: {
                            color: '#c1cadf',
                            align: 'right',
                            lineHeight: 10
                        },
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: 'rgba(240,199,37,0.5)'
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            interval: 0,
                            color: '#c1cadf'
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: "rgba(164,218,255,0.1)",
                                type: 'dashed'
                            }
                        }
                    }],
                    series: [{
                        name: '玻璃输液瓶',
                        type: 'line',
                        symbol: 'circle',
                        smooth: true,
                        symbolSize: 8,
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(40,124,231,0.3)'
                            }, {
                                offset: 1,
                                color: 'rgba(40,124,231,0.03)'
                            }])
                        },
                        barWidth: '30%',
                        itemStyle: {
                            normal: {
                                color: '#287CE7',
                            }
                        },
                        data: this.glassList,
                    }, {
                        name: '塑料输液瓶',
                        type: 'line',
                        smooth: true,
                        symbol: 'circle',
                        symbolSize: 8,
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(41,176,197,0.3)'
                            }, {
                                offset: 1,
                                color: 'rgba(41,176,197,0.03)'
                            }])
                        },
                        barWidth: '30%',
                        itemStyle: {
                            normal: {
                                color: '#29B0C5'
                            }
                        },
                        data: this.plasticList,}
                    // }, {
                    //     name: 'AB桶',
                    //     type: 'line',
                    //     symbol: 'circle',
                    //     smooth: true,
                    //     symbolSize: 8,
                    //     areaStyle: {
                    //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    //             offset: 0,
                    //             color: 'rgba(233,188,92,0.3)'
                    //         }, {
                    //             offset: 1,
                    //             color: 'rgba(233,188,92,0.03)'
                    //         }])
                    //     },
                    //     barWidth: '30%',
                    //     itemStyle: {
                    //         normal: {
                    //             color: '#E9BC5C'
                    //         }
                    //     },
                    //     data: [20, 19, 8, 16, 53, 27],
                    // }, {
                    //     name: '杂料',
                    //     type: 'line',
                    //     symbol: 'circle',
                    //     smooth: true,
                    //     symbolSize: 8,
                    //     areaStyle: {
                    //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    //             offset: 0,
                    //             color: 'rgba(173,123,207,0.3)'
                    //         }, {
                    //             offset: 1,
                    //             color: 'rgba(173,123,207,0.03)'
                    //         }])
                    //     },
                    //     barWidth: '30%',
                    //     itemStyle: {
                    //         normal: {
                    //             color: '#AD7BCF'
                    //         }
                    //     },
                    //     data: [15, 30, 4, 31, 39, 9],
                    // }
                        ]};
                myChart.setOption(option, true)
                window.addEventListener('resize', () => {
                    myChart.resize()
                })
            }
        },
        beforeDestroy() {

        }
    }
</script>

<style lang="less" scoped>
    .income-container {
        .chart {
            height: 3rem;
        }
    }
</style>
